import { NavBar, Button, Tag } from 'antd-mobile'
import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { adddate, deldate } from '../../store/dateslice'
import dayjs from 'dayjs'
function Index() {
  let aa = useLocation()
  let nav=useNavigate()
  console.log('aa', aa.state)
  let data = aa.state
  const { date, end, start } = useSelector(state => state.dateslice)
  console.log('deldate', date)
  const dispatch = useDispatch()
  return (
    <div style={{ background: '#eee', height: '100vh' }}>
      <NavBar onBack={()=>nav(-1)} style={{ background: '#16bcc8', color: '#fff' }}>G107</NavBar>
      {/* 操作时间 */}
      <div style={{ display: 'flex', justifyContent: 'space-around', height: '40px', alignItems: 'center', color: '#16bcc8' }}>
        <span onClick={() => { dispatch(deldate()) }}>前一天</span>
        <span>{date}</span>
        <span onClick={() => { dispatch(adddate()) }}>后一天</span>
      </div>
      {/* 车票信息 */}
      <div style={{
        background: '#fff', display: 'flex', height: '100px',
        justifyContent: 'space-around', borderBottom: '1px solid #eee'
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '8px', alignItems: 'center', margin: '7px', }}>
          <span>{data.start}</span>
          <span>{data.startTime}</span>
          <span>{data.end}</span>
          <span>09-09 周五</span>
          <span>耗时5时47分</span>
          <span>09-09 周五</span>
        </div>
        {/* 价格 */}
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span style={{ color: 'red', size: '17px' }}>￥{data.tick.secondTick}</span>
        </div>
      </div>

      {/* 下方选择车票 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px', borderBottom: '1px solid #ccc' }}>
        <div style={{ fontSize: '14px' }}>
          <span style={{ marginRight: '10px' }}>二等座</span>
          <span style={{ color: 'orange' }}>￥{data.tick.secondTick}</span>
        </div>

        <div>
          <span style={{ marginRight: '10px' }}>有票</span>
          <Tag color='warning' fill='outline'>
            收起
          </Tag>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px', borderBottom: '1px solid #ccc' }}>
        <div style={{ fontSize: '14px' }}>
          <span style={{ marginRight: '10px' }}>一等座</span>
          <span style={{ color: 'orange' }}>￥{data.tick.firstTick}</span>
        </div>

        <div>
          <span style={{ marginRight: '10px' }}>有票</span>
          <Tag color='warning' fill='outline'>
            收起
          </Tag>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px', borderBottom: '1px solid #ccc' }}>
        <div style={{ fontSize: '14px' }}>
          <span style={{ marginRight: '10px' }}>商务座</span>
          <span style={{ color: 'orange' }}>￥{data.tick.vip}</span>
        </div>

        <div>
          <span style={{ marginRight: '10px' }}>5张</span>
          <Tag color='warning' fill='outline'>
            收起
          </Tag>
        </div>
      </div>
    </div>
  )
}

export default Index
